<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="用户ID"
        style="width: 120px"
      />
      <el-input
        v-model.trim="listQuery.nickname"
        clearable
        placeholder="用户昵称"
        style="width: 120px"
      />
      <el-select
        v-model="listQuery.userTags"
        clearable
        filterable
        placeholder="分类搜索"
        style="width: 120px"
      >
        <el-option
          v-for="(item, i) in UserClassList"
          :key="i"
          :label="item.type"
          :value="item.userId"
        />
      </el-select>
      <el-select
        v-model="listQuery.channel"
        clearable
        filterable
        placeholder="渠道"
        style="width: 120px"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-select
        v-model="listQuery.identifyType"
        clearable
        filterable
        style="width: 100px"
      >
        <el-option :value="1" label="真人" />
        <el-option :value="2" label="主播" />
      </el-select>
      <el-input
        v-model="listQuery.charmCoinsMin"
        clearable
        placeholder="最小魅力分数"
        type="number"
        style="width: 200px"
      ></el-input>
      -
      <el-input
        v-model="listQuery.charmCoinsMax"
        clearable
        placeholder="最大魅力分数"
        type="number"
        style="width: 200px"
      ></el-input>
      <el-input
        v-model="listQuery.onlineMinutesMin"
        clearable
        placeholder="最小在线时长(分钟)"
        type="number"
        style="width: 200px"
      ></el-input>
      -
      <el-input
        v-model="listQuery.onlineMinutesMax"
        clearable
        placeholder="最大在线时长(分钟)"
        type="number"
        style="width: 200px"
      ></el-input>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
      <el-button
        type="warning"
        @click="exportExcel('#anchorListFirst', '主播列表')"
      >
        导出
      </el-button>
      <!-- <el-link type="primary" @click="advanceSearchVisible = true">
        高级搜索
      </el-link> -->
    </div>
    <!-- <el-dialog :visible.sync="advanceSearchVisible">
      <el-form ref="form" label-width="80px">
        <el-form-item label="魅力分数">
          <el-input
            v-model="listQuery.charmCoinsMin"
            clearable
            placeholder="最小魅力分数"
            type="number"
            style="width: 200px"
          ></el-input>
          -
          <el-input
            v-model="listQuery.charmCoinsMax"
            clearable
            placeholder="最大魅力分数"
            type="number"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="在线时长">
          <el-input
            v-model="listQuery.onlineMinutesMin"
            clearable
            placeholder="最小在线时长(分钟)"
            type="number"
            style="width: 200px"
          ></el-input>
          -
          <el-input
            v-model="listQuery.onlineMinutesMax"
            clearable
            placeholder="最大在线时长(分钟)"
            type="number"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="advanceSearchVisible">取消</el-button>
        <el-button type="primary" @click="onHandleAdvanceSearch"
          >确定</el-button
        >
      </span>
    </el-dialog> -->
    <div class="cs-filter-result">
      <AdvanceTable
        :loading="listLoading"
        :columns="columns"
        :list="list"
        :height="'calc(100vh - 380px)'"
      >
        <template slot="avatar" slot-scope="{ row }">
          <image-tooltip :image-id="row.avatar">
            <img
              v-if="row.avatar"
              slot="img"
              :src="row.avatar"
              width="100"
              @click="zoomImage(row.avatar)"
            />
          </image-tooltip>
        </template>
        <template slot="userId" slot-scope="{ row }">
          <TooptipsCom :user-id="row.userId" />
        </template>
        <template slot="_action_" slot-scope="{ row }">
          <el-button
            v-if="row.userId !== 0"
            type="primary"
            size="mini"
            @click="onGoDetail(row.userId)"
          >
            详情
          </el-button>
        </template>
      </AdvanceTable>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
      <el-dialog
        v-loading="dialogLoading"
        title="主播详情"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <div v-if="userDetail" class="detail-box">
          <span>
            昵称: <span>{{ userDetail.nickName }}</span>
          </span>
          <span>
            主播ID: <span>{{ userDetail.userId }}</span>
          </span>
          <span>
            在线时长(分钟): <span>{{ userDetail.onlineTime }}</span>
          </span>

          <span>
            总收入（钻石）: <span>{{ userDetail.totalDiamonds }}</span>
          </span>
          <span>
            语音时长（分钟）: <span>{{ userDetail.voiceTime }}</span>
          </span>
          <span>
            视频时长(分钟): <span>{{ userDetail.videoTime }}</span>
          </span>

          <span>
            消息收入（钻石）:
            <span>{{ userDetail.messageDiamonds }}</span>
          </span>
          <span>
            语音接通次数: <span>{{ userDetail.voiceConnectTimes }}</span>
          </span>
          <span>
            视频接通次数: <span>{{ userDetail.videoConnectNum }}</span>
          </span>

          <span>
            语音收入(钻石): <span>{{ userDetail.voiceDiamonds }}</span>
          </span>
          <span>
            语音接通人数:
            <span>{{ userDetail.voiceConnectPeople }}</span>
          </span>
          <span>
            视频接通人数:
            <span>{{ userDetail.videoConnectPeople }}</span>
          </span>

          <span>
            视频收入(钻石): <span>{{ userDetail.videoDiamonds }}</span>
          </span>
          <span>
            语音被叫次数: <span>{{ userDetail.voiceCalledTimes }}</span>
          </span>
          <span>
            视频被叫次数: <span>{{ userDetail.videoCalledNum }}</span>
          </span>

          <span>
            礼物收入（钻石）: <span>{{ userDetail.giftDiamonds }}</span>
          </span>
          <span>
            语音被叫人数: <span>{{ userDetail.voiceCalledPeople }}</span>
          </span>
          <span>
            视频被叫人数: <span>{{ userDetail.videoCalledPeople }}</span>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确 定
          </el-button>
        </span>
      </el-dialog>
      <ImageViewer :visible.sync="showImage" :url="imageUrl" />
    </div>
  </div>
</template>

<script>
import AdvanceTable from '@/components/AdvanceTable'
import TablePagination from '@/components/TablePagination'
import { deepClone } from '@/utils'
import {
  xhrAnchorList,
  xhrAnchorDetail,
  xhrAnalysisUserClassList
} from '@/api/account'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import ImageViewer from '@/components/ImageViewer'

export default {
  name: 'AnchorList',
  components: { TablePagination, ImageViewer, AdvanceTable },
  data() {
    return {
      list: null,
      total: 0,
      channels: [],
      daterangeValue: '',
      identifyTypeItems: { 0: '未认证', 1: '真人', 2: '主播' },
      vipTypeItem: { 0: '白银', 1: '黄金', '-1': '无vip' },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      listQuery: {
        pageSize: 20,
        pageNum: 1,
        channel: null,
        startTime: null,
        endTime: null,
        userTags: null,
        nickname: null,
        identifyType: null,
        charmCoinsMin: null,
        charmCoinsMax: null,
        onlineMinutesMin: null,
        onlineMinutesMax: null,
        userId: (this.$route.query && this.$route.query.id) || null
      },
      UserClassList: [],
      userDetail: null,
      listLoading: true,
      dialogLoading: true,
      dialogVisible: false,
      showImage: false,
      imageUrl: '',
      advanceSearchVisible: false,
      columns: [
        {
          key: 'nickName',
          label: '用户昵称',
          visible: true,
          width: '100'
        },
        {
          key: 'coinRate',
          label: '分成比例',
          visible: true,
          width: '100'
        },
        {
          key: 'avatar',
          label: '头像',
          slot: true,
          visible: true,
          width: 120
        },
        {
          key: 'userId',
          label: '主播ID',
          slot: true,
          visible: true,
          width: '100'
        },
        {
          key: 'identifyType',
          label: '真人/主播认证',
          filter: function(val) {
            const obj = { 0: '未认证', 1: '真人', 2: '主播' }
            return obj[val]
          },
          visible: true,
          width: '140'
        },
        {
          key: 'channelId',
          label: '激活渠道',
          visible: true,
          width: '100'
        },
        {
          key: 'charmLevel',
          label: '魅力等级/魅力值',
          visible: true,
          width: '150'
        },
        {
          key: 'charmCoins',
          label: '魅力分',
          visible: true,
          width: '120'
        },
        {
          key: 'vipType',
          label: 'vip',
          filter: function(val) {
            let obj = { 0: '白银', 1: '黄金', '-1': '无vip' }
            return obj[val]
          },
          visible: true
        },
        {
          key: 'coins',
          label: '积分',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '100'
        },
        {
          key: 'totalWithdrawAmount',
          label: '已提现（元）',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '120'
        },
        {
          key: 'totalDiamonds',
          label: '总收入（元）',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '120'
        },
        {
          key: 'voiceDiamonds',
          label: '语音收入（元）',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '150'
        },
        {
          key: 'videoDiamonds',
          label: '视频收入（元）',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '150'
        },
        {
          key: 'giftDiamonds',
          label: '直购礼物收入（元）',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '170'
        },
        {
          key: 'giftPackageDiamonds',
          label: '背包礼物收入（元）',
          visible: true,
          filter: function(val) {
            return val / 100
          },
          width: '170'
        },
        {
          key: 'onlineMinutes',
          label: '在线时长(分钟)',
          visible: true,
          width: '150'
        },
        {
          key: 'chatCalledCount',
          label: '视频被叫次数',
          visible: true,
          width: '150'
        },
        {
          key: 'chatAnswerCount',
          label: '视频接通次数',
          visible: true,
          width: '150'
        },
        {
          key: 'accostCount',
          label: '发出打招呼次数',
          visible: true,
          width: '150'
        },
        {
          key: '_action_',
          label: '操作',
          slot: true,
          visible: true,
          fixed: 'right'
        }
      ]
    }
  },
  created() {
    const today = new Date()
    this.daterangeValue = [today, today]
    this.listQuery.startTime = new Date(
      today.getFullYear() +
        '-' +
        (today.getUTCMonth() + 1) +
        '-' +
        today.getUTCDate() +
        ' 00:00:00'
    ).getTime()
    this.listQuery.endTime = new Date(
      today.getFullYear() +
        '-' +
        (today.getUTCMonth() + 1) +
        '-' +
        today.getUTCDate() +
        ' 23:59:59'
    ).getTime()
    this.doSearch()
    this.getUserClassList()
    this.getChannels()
  },
  methods: {
    onHandleAdvanceSearch() {
      this.handleFilter()
      this.advanceSearchVisible = false
    },
    getChannels() {
      this.xhrGetChannels().then(resp => {
        this.channels = resp.data
      })
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
      console.log(url, this.imageUrl)
    },
    getUserClassList() {
      xhrAnalysisUserClassList().then(resp => {
        this.UserClassList = resp.data.list
      })
    },
    doSearch() {
      if (this.listQuery.userId && !/^[\d,]*$/.test(this.listQuery.userId)) {
        this.$message.warning('用户ID只能是数字')
        this.listLoading = false
        return
      }
      const query = deepClone(this.listQuery)
      if (query.userTags != null) {
        query.userId = query.userId
          ? query.userId + ',' + query.userTags
          : query.userTags
      }
      query.userTags = null
      xhrAnchorList(query)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    DeepClone(obj) {
      if (obj === null || typeof obj !== 'object') return obj
      var cpObj = obj instanceof Array ? [] : {}
      for (var key in obj) cpObj[key] = this.DeepClone(obj[key])
      return cpObj
    },
    onGoDetail(userId) {
      this.dialogLoading = true
      const { startTime, endTime } = this.listQuery
      xhrAnchorDetail({ userId, startTime, endTime })
        .then(resp => {
          this.userDetail = Object.assign({}, resp.data)
          this.dialogVisible = true
          this.dialogLoading = false
        })
        .catch(err => {
          this.$message.error(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  > span {
    width: 30%;
    margin: 10px 0;
    > span {
      font-weight: 700;
    }
  }
}
</style>
